<template>
  <div class="nnn-contain">
    <div class="cash">
      <!-- 表单 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="商户名称/ID">
              <el-input v-model="formInline.user" placeholder="商户名称/ID" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="日期">
              <el-date-picker
                v-model="value1"
                start-placeholder="开始日期"
              />
              至
              <el-date-picker
                v-model="value2"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="行业">
              <el-select v-model="formInline.region" placeholder="行业">
                <el-option label="食品" value="shipin" />
                <el-option label="日杂" value="riza" />
                <el-option label="百货" value="baihuo" />
                <el-option label="服饰" value="fuhsi" />
              </el-select> -
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <template>
              <el-button size="medium">查询</el-button>
              <el-button size="medium">重置</el-button>
            </template>
          </el-col>
        </el-row>
      </el-form>
      <!--/ 表单 -->
    </div>
    <el-card class="hr-block">
      <div slot="header" class="ysa">
        <span>{{ "订单数量：xxxx" }}</span>
        <span>{{ "订单总金额：xxxx" }}</span>
        <span>{{ "退款/售后订单数量：xxx" }}</span>
        <span>{{ "退款/售后率：x.x%" }}</span>
        <span>{{ "确认退款订单数量：xxx" }}</span>
        <span>{{ "确认退款率：xx.x%" }}</span>
      </div>
      <!-- <el-table style="width: 100%">
        <el-table-column label="订单数量：xxxx" />
        <el-table-column label="订单总金额：xxxx" />
        <el-table-column label="退款/售后订单数量：xxx" />
        <el-table-column label="退款/售后率：x.x%" />
        <el-table-column label="确认退款订单数量：xxx" />
        <el-table-column label="确认退款率：xx.x%" />
      </el-table> -->
      <el-table
        :data="list"
        style="width: 100%"
      >
        <el-table-column prop="id" label="商户ID" />
        <el-table-column prop="name" label="商户名称" />
        <el-table-column prop="level" label="行业" />
        <el-table-column prop="zongshu" label="订单总数量" />
        <el-table-column prop="zongjine" label="订单总金额" />
        <el-table-column prop="refund" label="退款/售后订单数量" />
        <el-table-column prop="refunds" label="退款/售后率" />
        <el-table-column prop="refundzs" label="确认退款订单数量" />
        <el-table-column prop="refundje" label="确认退款金额" />
        <el-table-column prop="refundlv" label="确认退款率" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Nnn',
  components: {},
  props: {},
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      value1: '',

      showDialog: true,
      page: {
        page: 1,
        total: 0,
        pageSize: 10
      },
      list: [{
        id: '11223',
        name: '新家宜',
        zongshu: '300',
        zongjine: 'xxx.xx元',
        level: '服饰',
        refund: '7',
        refunds: '2%',
        refundzs: '6',
        refundje: 'xxx.xx元',
        refundlv: '22.2%'
      }, {
        id: '11224',
        name: '新家宜',
        zongshu: '300',
        zongjine: 'xxx.xx元',
        level: '服饰',
        refund: '7',
        refunds: '2%',
        refundzs: '6',
        refundje: 'xxx.xx元',
        refundlv: '22.2%'
      }, {
        id: '11225',
        name: '新家宜',
        zongshu: '300',
        zongjine: 'xxx.xx元',
        level: '服饰',
        refund: '7',
        refunds: '2%',
        refundzs: '6',
        refundje: 'xxx.xx元',
        refundlv: '22.2%'
      }, {
        id: '11226',
        name: '新家宜',
        zongshu: '300',
        zongjine: 'xxx.xx元',
        level: '服饰',
        refund: '7',
        refunds: '2%',
        refundzs: '6',
        refundje: 'xxx.xx元',
        refundlv: '22.2%'
      }]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped lang="scss">
  .cash {
    margin: 8px;
    border-radius: 4px;
    border: 1px solid black;
    padding: 20px;
  }
  .ysa{
    color: #909399;
    font-family: 'Courier New', Courier, monospace;
  }
</style>
